<template>
    <div class="login-wrapper">
<div class="modal">
     <div class="title">伟大的作品</div>
    <el-form :model="user" 
    :rules="rules" 
    ref="userFormRef">  
    <el-form-item prop="userName">
      <el-input v-model="user.userName" />
    </el-form-item>
    <el-form-item prop="userPwd">
      <el-input type="password" v-model="user.userPwd" />
    </el-form-item>
    <el-form-item >
      <el-button type="primary" :plain="true" class="btn" @click="login(userFormRef)">登录</el-button>
    </el-form-item>
    </el-form>
</div>

</div>
</template>

<script setup>

// console.log(api);
import { ElMessage } from 'element-plus'
import {ref,reactive, getCurrentInstance}from'vue'
import {useStore}from 'vuex'
// proxy劫持对象 可以找到$api proxy.$api.login()可以请求了
// import{post}from'../utils/request'
import {useRouter} from 'vue-router';
// import { userInfo } from 'os';
let user=reactive({userName:"",userPwd:""})
const router=useRouter()
const store=useStore()
const {proxy}=getCurrentInstance()
let rules=reactive({
    userName:[
        {
            required:true,
            message:'请输入用户名',
            trigger:'blur'
        }
    ],
      userPwd:[
        {
            required:true,
            message:'请输入密码',
            trigger:'blur'
        }
    ]
})
let userFormRef=ref(null)
const login=(formRef)=>{
    // console.log(formRef);
    formRef.validate((valid)=>{
        console.log(valid);
        //根据我们刚刚设置的rules去匹配，都满足返回true
        //只要有一个不满足返回false
        if(valid){
            //发送请求
            //获取token保存
            //跳转到首页    
         proxy.$api.login(user).then((userInfo)=>{
                console.log(userInfo);
                store.commit('saveUserInfo',userInfo)
                router.push("/welcome")
                    // ElMessage({
                    // message: '登录成功',
                    //  type: 'success',
                    //  })
                    // let tok=res.token
                    // //token要保存在vuex
                    // console.log(tok);
                    // sessionStorage.setItem("token",tok)
                    //  router.push('/')
            })
            // 第二种
//   let res =await post('/users/login',user)
        }
    })
}
</script>

<style lang="scss" scoped>
.login-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background-color: #fff;
    .modal{
        width: 500px;
        padding:50px;
        background-color: #fff;
        box-shadow: 0px 0px 10px 3px #ddd;
        border-radius: 5px;
        .title{
            text-align: center;
            font-size:50px;
            margin-bottom:30px;
            line-height: 1.5;
        }
        .btn{
            width: 100%;
        }
    }
}
</style>